<template>
  <div>
    <a-form @submit="handleSearch">
      <a-row :gutter="40">
        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="商户单号" v-model="query.data.merchantOrderNo"/>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="交易单号" v-model="query.data.transOrderNo"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-select placeholder="交易状态" :options="statusList" v-model="query.data.status"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-select placeholder="交易类型" :options="transTypeList" v-model="query.data.transType" ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item v-bind="formItemLayout">
            <a-date-picker placeholder="交易时间" format="YYYYMMDD" @change="onChange" :defaultValue="moment(today)"/>
          </a-form-item>
        </a-col>
        <a-col :span="5" :style="{ textAlign: 'right' }">
          <a-button type="primary" @click="reset">重置</a-button>
          <a-button type="primary" html-type="submit">查询</a-button>
          <!-- <a-button type="primary" @click="conexport">导出</a-button> -->
        </a-col>
      </a-row>
    </a-form>
    <p style="text-align:right;padding-right:20px;">总计{{sum}}笔，成功{{count}}笔，成功金额{{amount}}元</p>
    <a-table
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.merchantOrderNo"
    >
      <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <span>交易单号：{{record.transOrderNo}}</span>
        <span>交易手续费：{{record.feeAmount}}</span>
        <span>D0服务费：{{record.d0SingleAmount}}</span>
        {{record.description}}
      </div>
    </a-table>
    <a-pagination  @change="onPageChange" :current="pagination.current" :total="pagination.total" :pageSize="query.pageSize" style="margin-top: 10px" />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "交易日期", dataIndex: "transDate" },
  { title: "交易时间", dataIndex: "transTime" },
  { title: "商户单号", dataIndex: "merchantOrderNo" },
  { title: "交易金额", dataIndex: "amount" },
  { title: "交易类型", dataIndex: "transName" },
  { title: "交易状态", dataIndex: "statusName" }
];


export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      today:new Date(),
      columns,
      statusList:[
        { label: "全部", value: "" },
        { label: "下单中", value: "ordering" },
        { label: "待支付", value: "ordered" },
        { label: "交易成功", value: "payed" },
        { label: "交易失败", value: "failed" },
        { label: "状态不明", value: "notconfirmed" },
      ],
      transTypeList:[],
      query:{
        data:{},
        page:1,
        pageSize:10
      },
      pagination:{current:null,total:null},
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list:[],
      count:null,
      payedCount:null,
      totalAmount:null,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
          md: { span: 14 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {
    // this.handleSearch();
    this.protocolstatus();
    },
 
  methods: {
    moment,
    onPageChange:function(page,pageSize){
      console.info(page,pageSize);
      this.query.page=page;
      this.query.pageSize=pageSize;
       this.handleSearch();
    },
    onChange(dates, dateStrings) {
      this.query.data.transDate = dateStrings;
    },
    reset() {this.query.data={}},//重置
    conexport() {},
    callback() {},
    protocolstatus(){//此方法是用来填充状态的
      this.$axios.get("/agent/transaction/protocolList").then(res =>{
        console.info(res)
        this.transTypeList.push({label:"全部",value:""});
        for(var i=0;i<res.data.list.length;i++){
        this.transTypeList.push({label:res.data.list[i].transName,value:res.data.list[i].transCode})
        } 
      })
    },
    handleSearch() {
      //e.preventDefault();
      console.info(this.query)
      api.coustromOrg(this.query,res => {
        console.info(res)
        if(res.code=="OK"){
          this.list=res.data.transList;
          this.pagination.current=res.data.current;
          this.pagination.total=res.data.total;
          this.count=res.data.total;//总笔数
          this.payedCount=res.data.payedCount;//成功笔数
          this.totalAmount=res.data.totalAmount;//总金额
        }else{
          return false;
        }
        })
    },
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
span {
  cursor: pointer;
}
.formGroupTitle{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.ant-tabs-nav{
  float: right;
}
</style>
